<template>
	<view class="container">
		<view class="ui-all">
			<view class="avatar" @tap="avatarChoose">
				<view class="imgAvatar">
					<view class="iavatar" :style="'background: url('+avater+') no-repeat center/cover #eeeeee;'"></view>
				</view>
				<text v-if="avater">修改头像</text>
				<text v-if="!avater">授权微信</text>
			</view>
			<view class="ui-list">
				<text>昵称</text>
				<input type="text" :placeholder="value" :value="nickName" @input="bindnickName"
					placeholder-class="place" />
			</view>
			<view class="ui-list">
				<text>手机号</text>
				<input type="tel" :placeholder="value" :value="mobile" @input="bindmobile" placeholder-class="place" />
			</view>
			<view class="ui-list right">
				<text>性别</text>
				<picker @change="bindPickerChange" mode='selector' range-key="name" :value="index" :range="sex">
					<view class="picker">
						{{sex[index].name}}
					</view>
				</picker>
			</view>
			<view class="ui-list right">
				<text>常住地</text>
				<picker @change="bindRegionChange" mode='region'>
					<view class="picker">
						{{region[0]}} {{region[1]}} {{region[2]}}
					</view>
				</picker>
			</view>
			<view class="ui-list right">
				<text>生日</text>
				<picker mode="date" :value="date" @change="bindDateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
			<view class="ui-list">
				<text>签名</text>
				<textarea :placeholder="value" placeholder-class="place" :value="description"
					@input="binddescription"></textarea>
			</view>
			<button class="save" @tap="savaInfo">保 存 修 改</button>
		</view>

	</view>
</template>

<script>
	import api from "@/common/api/api.js"
	import baseUrl from "@/common/api/config.js"
	export default {

		data() {
			return {
				value: '请填写',
				sex: [{
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				index: 0,
				region: ['请填写', '', ''],
				date: '请填写',
				avater: '',
				description: '',
				url: '',
				nickName: '',
				mobile: '',
				headimg: '',
				upload: true
			}

		},

		methods: {
			bindPickerChange(e) {
				this.index = e.detail.value;

			},
			bindRegionChange(e) {
				this.region = e.detail.value;

			},
			bindDateChange(e) {
				this.date = e.detail.value;

			},
			bindnickName(e) {
				this.nickName = e.detail.value;

			},
			bindmobile(e) {
				this.mobile = e.detail.value;

			},
			binddescription(e) {
				this.description = e.detail.value;

			},
			avatarChoose() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success(res) {
						// tempFilePath可以作为img标签的src属性显示图片
						that.imgUpload(res.tempFilePaths);
						const tempFilePaths = res.tempFilePaths;
					}
				});
			},
			getphonenumber(e) {
				if (e.detail.iv) {
					console.log(e.detail.iv) //传后台解密换取手机号
					uni.showToast({
						title: '已授权',
						icon: 'none',
						duration: 2000
					})
				}
			},
			savaInfo() {
				let that = this;
				let nickname = that.nickName;
				let headimg = that.headimg;
				let gender = that.index;
				let mobile = that.mobile;
				let region = that.region;
				let birthday = that.date;
				let description = that.description;
				let updata = {};
				if (!nickname) {
					uni.showToast({
						title: '请填写昵称',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				updata.nickname = nickname;
				if (!headimg) {
					headimg = that.avater;
				}
				updata.headimg = headimg;
				updata.gender = gender;
				if (that.isPoneAvailable(mobile)) {
					updata.mobile = mobile;
				} else {
					uni.showToast({
						title: '手机号码有误，请重填',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (region.length == 1) {
					uni.showToast({
						title: '请选择常住地',
						icon: 'none',
						duration: 2000
					});
					return;
				} else {
					updata.province = region[0];
					updata.city = region[1];
					updata.area = region[2];
				}
				if (birthday == "0000-00-00") {
					uni.showToast({
						title: '请选择生日',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				updata.birthday = birthday;
				updata.description = description;
				if (this.upload) {
					that.updata(updata);
				} else {
					uni.showToast({
						title: '图片上传中.....',
						icon: "success",
						duration: 2000
					});
				}
			},
			isPoneAvailable(poneInput) {
				var myreg = /^1[3-9][0-9]{9}$/;
				if (!myreg.test(poneInput)) {
					return false;
				} else {
					return true;
				}
			},
			async updata(datas) {
				//传后台
				let openid = uni.getStorageSync("openid")
				// console.log("openid", openid)
				console.log(datas)
				// let url = "user/update?openid=" + openid + "&nickName=" + datas.nickname + "&phone=" +
				// 	datas.mobile +
				// 	"&sex=" + (datas.gender === 1 ? "男" : "女") + "&province=" + datas.province + "&city=" +
				// 	datas.city + "&area=" + datas.area + "&birthday=" + datas.birthday + "&sign=" +
				// 	datas.description + "&avatarUrl=" + datas.headimg + "&status=0"
				let data = {
					openid,
					nick_name: datas.nickname,
					phone: datas.mobile,
					sex: (parseInt(datas.gender) === 0 ? "男" : "女"),
					province: datas.province,
					city: datas.city,
					area: datas.area,
					birthday: datas.birthday,
					sign: datas.description,
					avatar_url: datas.headimg,
					status: 0

				}
				console.log(data)
				let res = await api("/user/update", data, "post")
				if (res.code === 200) {
					uni.setStorageSync("userInfo", data)
					uni.showToast({
						title: '修改完成!',
						icon: "success",
						duration: 2000
					});
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/userInfo/userInfo"
						})
					}, 500)
				}
			},
			imgUpload(file) {
				let that = this;
				this.upload = false
				uni.uploadFile({
					header: {
						Authorization: uni.getStorageSync('token')
					},
					url: baseUrl + '/resultViewModel/uploadImg', //需传后台图片上传接口
					filePath: file[0],
					name: 'file',
					formData: {
						file: file[0]
					},
					success: function(res) {
						var data = JSON.parse(res.data);
						that.upload = true
						data = data.url;
						that.avater = data;
						that.headimg = data;
					},
					fail: function(error) {
						console.log(error);
					}
				});
			},
			async fetchData() {
				// nickName: datas.nickname,
				// phone: datas.mobile,
				// sex: (datas.gender === 1 ? "男" : "女"),
				// province: datas.province,
				// city: datas.city,
				// area: datas.area,
				// birthday: datas.birthday,
				// sign: datas.description,
				// avatarUrl: datas.headimg,
				// status: 0
				console.log("c-use")
				let data = (await api("/user/selectByOpenid?openid=" + uni.getStorageSync("openid")))
				console.log(data)
				this.avater = data.avatar_url
				this.nickName = data.nick_name
				this.mobile = data.phone
				this.index = data.sex === "男" ? 0 : 1
				this.region[0] = data.province === null ? "请填写" : data.province
				this.region[1] = data.city === null ? "" : data.province
				this.region[2] = data.area === null ? "" : data.province
				this.description = data.sign
				this.date = data.birthday === null ? "请填写" : data.birthday
			}

		},
		mounted() {
			// 在组件被挂载后，发起数据请求
			this.fetchData()
		},


	}
</script>

<style lang="scss">
	.container {
		display: block;
	}

	.ui-all {
		padding: 20rpx 40rpx;

		.avatar {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			.imgAvatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				overflow: hidden;

				.iavatar {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			text {
				display: inline-block;
				vertical-align: middle;
				color: #8e8e93;
				font-size: 28rpx;
				margin-left: 40rpx;
			}

			&:after {
				content: ' ';
				width: 20rpx;
				height: 20rpx;
				border-top: solid 1px #030303;
				border-right: solid 1px #030303;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				/* IE 9 */
				-moz-transform: rotate(45deg);
				/* Firefox */
				-webkit-transform: rotate(45deg);
				/* Safari 和 Chrome */
				-o-transform: rotate(45deg);
				position: absolute;
				top: 85rpx;
				right: 0;
			}
		}

		.ui-list {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				min-width: 150rpx;
			}

			input {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
			}

			button {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;

				&::after {
					display: none;
				}
			}

			picker {
				width: 90%;
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				position: absolute;
				top: 30rpx;
				left: 150rpx;
			}

			textarea {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
				margin-top: 50rpx;
			}

			.place {
				color: #999999;
				font-size: 28rpx;
			}
		}

		.right:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 40rpx;
			right: 0;
		}

		.save {
			background: #2b85e4;
			border: none;
			color: #ffffff;
			margin-top: 40rpx;
			font-size: 28rpx;
		}
	}
</style>